<template>
  <div>
    <el-table
      ref="XTable"
      :data="tableData"
      :height="height"
      @selection-change="$emit('selection-change', $event)"
      border>
      <el-table-column
        v-if="tableList.filter((el) => el.type === 'XSelect').length > 0"
        :align="tableList.filter((el) => el.type === 'XSelect')[0].align"
        type="selection"
        :width="tableList.filter((el) => el.type === 'XSelect')[0].width" />
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        v-for="(item, index) in tableList.filter(el => el.type !== 'XSelect' && el.prop !== 'tableOption')"
        :key="index"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="item.type === 'XNumber'">{{ scope.$index + 1 }}</span>
          <span v-else-if="item.empty && !scope.row[item.prop] && typeof scope.row[item.prop] !== 'number'">{{item.empty}}</span>
          <span v-else-if="item.slot">
            <slot :name="item.slot"
                  :scope="scope"
                  :row="scope.row"
                  :index="scope.$index"
                  :prop="item.prop"
                  :value="scope.row[item.prop]" />
          </span>
          <span v-else-if="item.template">
            <component
              :is="item.template"
              :_this="$parent"
              :_ref="$refs['XTable']"
              :scope="scope"
              :row="scope.row"
              :index="scope.$index"
              :value="scope.row[item.prop]" />
          </span>
          <span v-else-if="item.x">
            <!-- if -->
            <span v-if="item.x.if">
              <span v-if="item.x.if.filter(fe => parseInt(Object.keys(fe)[0]) === scope.row[item.prop]).length > 0">
                <span>{{ item.x.if.filter(fe => parseInt(Object.keys(fe)[0]) === scope.row[item.prop])[0][
                Object.keys(item.x.if.filter(fe => parseInt(Object.keys(fe)[0]) === scope.row[item.prop])[0])[0]] }}</span>
              </span>
              <span v-else>{{item.empty ? item.empty : ''}}</span>
            </span>
            <!-- substring -->
            <span v-else-if="item.x.substring">
              <span>{{ scope.row[item.prop].substring(item.x.substring[0], item.x.substring[1]) }}</span>
            </span>
            <!-- for -->
            <span v-else-if="item.x.for">
              <span v-if="typeof scope.row[item.prop] === 'string'">
                <span v-for="(it, idx) in JSON.parse(scope.row[item.prop])" :key="idx">{{it}}<span v-if="idx + 1 !== JSON.parse(scope.row[item.prop]).length">{{item.x.forSeparator ? item.x.forSeparator : '、'}}</span></span>
              </span>
              <span v-else v-for="(it, idx) in scope.row[item.prop]" :key="idx">{{it}}<span v-if="idx + 1 !== scope.row[item.prop].length">{{item.x.forSeparator ? item.x.forSeparator : '、'}}</span></span>
            </span>
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <slot name="page" />
    <div class="XTable-Pages" v-if="tablePage">
      <el-pagination
        :current-page="tablePage.page"
        :page-size.sync="tablePage.size"
        :page-sizes="tablePage.pageSizes"
        :total="tablePage.total"
        class="XTable-Page"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="(val) => { tablePage.page = 1;tablePage.size = val;$emit('changePage')}"
        @current-change="(val) => { tablePage.page = val;$emit('changePage')}" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableList: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    height: {
      type: Number,
      default: undefined
    },
    tablePage: {
      type: Object,
      default: undefined
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    toggleRowSelection (row) {
      this.$refs.XTable.toggleRowSelection(row)
    },
    clearSelection () {
      this.$refs.XTable.clearSelection()
    },
    toggleAllSelection () {
      this.$refs.XTable.toggleAllSelection()
    }
  }
}
</script>
<style scoped>
.XTable-Pages {
  position: relative;
  background-color: white;
  height: 44px;
}
.XTable-Pages .XTable-Page {
  float: right;
  margin: 5px 100px 0 0;
  font-size: 14px !important;
}
</style>
